import { useLayoutEffect, useRef } from 'react';

import tree from './tree';
import classes from './tree.module.scss';
const Tree = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const divRef = useRef<HTMLDivElement>(null);
  useLayoutEffect(() => {
    if (divRef.current && canvasRef.current) {
      const rect = divRef.current.getBoundingClientRect();
      canvasRef.current.width = rect.width;
      canvasRef.current.height = rect.height;
      tree(canvasRef.current);
    }
  }, []);
  return (
    <div ref={divRef} className={classes.wrap}>
      <canvas ref={canvasRef} ></canvas>
    </div>
  );
};

export default Tree;
